<template>
   <Category :scene="scene"></Category>
   <el-card shadow="hover" :body-style="{ padding: '20px' }">
   <div v-show="scene == 0">
    <el-button @click="addSpu" type="primary" size="default" :icon="Plus" :disabled="CategoryStore.c3Id ? false :true">添加SPU</el-button>
    <el-table  border stripe  style="margin:10px 0px" :data="spuList.records"  @sort-change="sortChange">
        <el-table-column  label="序号" width="80px" type="index" >
        </el-table-column>
        <el-table-column  prop="spuName"  label="spu名称"  sortable show-overflow-tooltip
        resizable>
        </el-table-column>
        <el-table-column   prop="description" label="spu描述" show-overflow-tooltip
        resizable>
        </el-table-column>
        <el-table-column  label="操作">
            <template v-slot="{ row, $index }">
                <el-button
                  type="primary"
                  size="small"
                  title="添加SKU"
                  :icon="Plus"
                  @click="addSku(row)"
                ></el-button>
                <el-button
                  type="warning"
                  size="small"
                  title="修改SPU"
                  :icon="Edit"
                  @click='updateSpu(row)'
                ></el-button>
                <el-button
                  type="info"
                  size="small"
                  title="查看SKU"
                  @click="showDialog(row)"
                  :icon="InfoFilled"
                ></el-button>
                <el-button
                  type="danger"
                  size="small"
                  title="删除SPU"
                  :icon="Delete"
                ></el-button>
              </template>
        </el-table-column>
    </el-table>
    <el-pagination
    @current-change="getspuList"
    @size-change="sizeHandler"
        v-model:current-page="currentPage"
        :page-sizes="[3,5,7]"
        v-model:page-size="pageSize"
        layout="  prev, pager, next, jumper,->, sizes,total"
        :total="99" 
        background
        :pager-count="7">
    </el-pagination>
   </div>
    <Spu v-show="scene==1" @changeScene="changeSceneHandler" ref="spuRef"></Spu>
      <Sku v-show="scene==2" ref="skuRef"></Sku>
   </el-card>
   
</template>

<script lang="ts" setup>
import {
  Check,
  Delete,
  Edit,
  Message,
  Search,
  Star,
  Plus,
  UploadFilled,
  InfoFilled
} from "@element-plus/icons-vue";
import useCategory from "@/stores/category";
import {ref , watch} from 'vue'
import {reqSpuList,reqFindSkuList,reqDeleteSpu} from '@/api/product/spu/spu'
//引入两个子组件
import Spu from  "./addOrUpdateSpu.vue";
import Sku from "./addSku.vue";
let CategoryStore =useCategory()
let currentPage=ref<number>(1)
let pageSize=ref<number>(3)
let scene=ref<number>(0)
  let skuRef = ref<any>()
    //准备响应式对象：存储服务器返回的数据
let spuList = ref({});
//存储子组件实例spu
let spuRef = ref<any>();
watch(()=>CategoryStore.c3Id,()=>{
    //三级分类的ID不能为空
    if (CategoryStore.c3Id == "") return;
    getspuList()
})
const getspuList=async(pager: number = 1) => {
  //整理参数
  currentPage.value = pager;
  //返回的SPU列表数据
  let result= await reqSpuList(currentPage.value,
    pageSize.value,
    CategoryStore.c3Id)
    spuList.value=result
}
//表格第二例排序
const sortChange = ({ column, prop, order }) => {
  //order:标记，可以知道当前升序、降序
};
//当每一页展示数据个数发生变化触发[分页器右侧下拉框 ]
const sizeHandler = (limit: number) => {
  pageSize.value = limit;
  //再次发请求获取SPU数据
  getspuList();
};
//添加SPU按钮的回调
const addSpu = ()=>{
   scene.value = 1;
   spuRef.value.initAddSpu(CategoryStore.c3Id)
}
//更新SPU按钮回调
const updateSpu = (hasSpu)=>{
  scene.value = 1;
  //获取子组件实例:调用子组件的方法
  spuRef.value.initHasSpuData(hasSpu);
}
// 添加sku
const addSku = (sku) => {
    scene.value = 2;
    skuRef.value.initattr(CategoryStore.c1Id, CategoryStore.c2Id, sku)
}
// 查看sku
const showDialog = async (row: any) => {
    dialogTableVisible.value = true
    skuList.value= await reqFindSkuList(row.id)
}
const changeSceneHandler = ({ scenes, flag }) => {
    //修改场景
    scene.value = scenes;
    if (flag == 'add') {
        //再次获取最新全部SPU的数据
        getspuList();
    } else {
        //当前是修改
        getspuList(currentPage.value);
    }
}

</script>

<style scoped>

</style>